<template>
  <div class="vux-actionsheet">
    <transition name="vux-actionsheet-mask">
      <div class="weui-mask weui-mask_transparent" @click="onClickingMask" v-show="show"></div>
    </transition>
    <div class="weui-actionsheet" :class="{'weui-actionsheet_toggle': show,displayNone:!show}">
      <div class="title">{{title}}</div>
      <div class="weui-actionsheet__menu">
        <div class="weui-actionsheet__cell" v-for="(text, key) in menus" @click="onMenuClick(text, key)" :key="key" >
          <div class="text"  >
            <p class="titles" :class="{'crt':text.id == id}" v-text="text.name"></p>
          </div>
          <div class="right">
            <span  v-if='text.id == id'></span>
          </div>
        </div>
        
      </div>
    </div>
  </div>
</template>
<script>
export default {
  mounted () {
    this.$nextTick(() => {
      this.$tabbar = document.querySelector('.weui-tabbar')
    });
  },
  props: {
    value: Boolean,
    id: {},
    title: String,
    menus: {
      type: [Object, Array],
      default: () => ({})
    },
    closeOnClickingMask: {
      type: Boolean,
      default: true
    }
  },
  data () {
    return {
      show: false
    }
  },
  methods: {
   
    onMenuClick (text, key) {
      if (text.name) {
        // console.log(text.id)
        this.emitEvent('on-click-menu', text.id)
      } else {
        this.show = false
      }
    },
    onClickingMask () {
      this.closeOnClickingMask && (this.show = false)
    },
    emitEvent (event, menu, shouldClose = true) {
      if (event === 'on-click-menu' && !/.noop/.test(menu)) {
        this.$emit(event, menu)
        this.$emit(`${event}-${menu}`)
        shouldClose && (this.show = false)
      }
    },
    fixIos (zIndex) {
      if (this.$el.parentNode && this.$el.parentNode.className.indexOf('v-transfer-dom') !== -1) {
        return
      }
      if (this.$tabbar && /iphone/i.test(navigator.userAgent)) {
        this.$tabbar.style.zIndex = zIndex
      }
    }
  },
  watch: {
    show (val) {
      this.$emit('input', val)
      if (val) {
        this.fixIos(-1)
      } else {
        setTimeout(() => {
          this.fixIos(100)
        }, 200)
      }
    },
    value: {
      handler: function (val) {
        this.show = val
      },
      immediate: true
    }
  },
  beforeDestroy () {
    this.fixIos(100)
  }
}
</script>

<style scoped lang="less">
.title{
  background: #fff;
  border-bottom: 1px solid #d9d9d9;
  font-size: 15px;
  color: #A3A3A3;
  padding:10px 15px; 
}
.weui-actionsheet__menu,.addNew .weui-actionsheet__menu{
  background: #F2F3F4;
  max-height: 300px;
  overflow-y: scroll;
}
.newTitle{
  padding-left: 20px;
  text-align: center;
  position: relative;
  padding: 10px 0;
  text-align: center;
  font-size: 14px;
  color: #3D3D3D;
  background: #fff;
  margin-bottom: 10px;
}
.weui-actionsheet__cell,.addNew .weui-actionsheet__cell{
  padding-left: 15px;
  position: relative;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  align-items: center;
  text-align: left;
  background: #fff;
  min-height: 30px;
  .text{
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    flex: 1;
  }
}
.titles{
    text-align: left;
    padding-left:15px; 
    word-wrap: break-word;
    word-break: break-all;
    font-size: 14px;
    color: #333333;
}
.titles.crt{
  color:#06C1AE;
}
.right{
  width:24px;
  height:12px;
}
.right span{
  color:#EE9900;
  float: right;
  padding:0 10px;
  width: 24px;
  height: 12px;
  background: url('./../../assets/images/right.png') no-repeat;
  background-size: auto 100%;
  background-position: center;
}
.text{
  font-size: 16px;
  color: #333333;
}
.weui-mask {
    position: fixed;
    z-index: 1000;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    background: rgba(0, 0, 0, .6);
}

.weui-mask_transparent{
    position: fixed;
    z-index: 1000;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
}
.weui-actionsheet {
    position: fixed;
    left: 0;
    bottom: 0;
    transform: translate(0, 100%);
    backface-visibility: hidden;
    z-index: 5000;
    width: 100%;
    background-color: #efeff4;;
    //slide up animation
    transition: transform .3s;
}
.weui-actionsheet__cell {
    position: relative;
    text-align: center;
    font-size: 18px;
    padding: 7px 0;
    &:before {
      content: " ";
      position: absolute;
      left: 15px;
      top: 0;
      right: 0;
      height: 1px;
      border-top: 1px solid #d9d9d9;
      color: #d9d9d9;
      -webkit-transform-origin: 0 0;
      transform-origin: 0 0;
      -webkit-transform: scaleY(.5);
      transform: scaleY(.5);
    }
    &:active{
        background-color: #ececec;
    }
    &:first-child{
        &:before{
            display: none;
        }
    }
}
.weui-actionsheet_toggle {
    -webkit-transform: translate(0);
    transform: translate(0);
}
.weui-actionsheet__menu{
    background-color: #FFFFFF;
}
.weui-actionsheet__action {
    margin-top: 6px;
    background-color: #FFFFFF;
}
.displayNone{
  display: none;
}
</style>
